<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 搜索框 -->
      <el-col :span="10" style="line-height: 0;margin-bottom: 20px;">
        <el-col :span="10">
          <el-input placeholder="请输入商品名称" prefix-icon="el-icon-search"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">搜索</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary">添加商品</el-button>
        </el-col>
      </el-col>
      <div class="text item" style="line-height: 0;text-align: left;">
        <div>
          <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="amount1" sortable label="数值 1">
            </el-table-column>
            <el-table-column prop="amount2" sortable label="数值 2">
            </el-table-column>
            <el-table-column prop="amount3" sortable label="数值 3">
            </el-table-column>
          </el-table>

          <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="amount1" label="数值 1（元）">
            </el-table-column>
            <el-table-column prop="amount2" label="数值 2（元）">
            </el-table-column>
            <el-table-column prop="amount3" label="数值 3（元）">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="block" style="text-align: left; line-height: 0;margin-top: 20px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageSize"
          :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      pageNum: 10,
      pageSize: 1,
      token: localStorage.getItem('token'),
      goodsList: [],
      baseURL: 'http://43.138.15.137:7000/api/private/v1',
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    async getGoodsList() {
      const res = await axios.get(this.baseURL + '/categories',
        {
          params: {
            pagenum: this.pageNum,
            pagesize: this.pageSize
          },
          headers: {
            'Authorization': this.token
          }
        },
      ).then(res => {
        let { meta, data } = res.data
        this.goodsList = data.result[0].children
        console.log(this.goodsList);
      })
    }
  }

}
</script>
